<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
        }

        .registration-container {
            margin-top: 50px;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .error {
            color: red;
            font-size: 0.9em;
            display: inline-block;
            margin-left: 10px;
        }

        .form-inline {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .form-inline .form-control {
            flex: 1;
            margin-right: 10px;
        }
    </style>
</head>
<body>

<div class="container registration-container">
    <h2 class="text-center">用户注册</h2>
    <form id="registrationForm">
        <div class="form-group form-inline">
            <label for="loginName" class="mr-2">登录名称</label>
            <input type="text" id="loginName" name="loginName" class="form-control" required>
            <span class="error" id="loginNameError"></span>
        </div>

        <div class="form-group form-inline">
            <label for="nickName" class="mr-2">用户昵称</label>
            <input type="text" id="nickName" name="nickName" class="form-control" required>
            <span class="error" id="nickNameError"></span>
        </div>

        <div class="form-group form-inline">
            <label for="passwd" class="mr-2">密码</label>
            <input type="password" id="passwd" name="passwd" class="form-control" required>
            <span class="error" id="passwdError"></span>
        </div>

        <div class="form-group form-inline">
            <label for="name" class="mr-2">姓名</label>
            <input type="text" id="name" name="name" class="form-control" required>
            <span class="error" id="nameError"></span>
        </div>

        <div class="form-group form-inline">
            <label for="phoneNum" class="mr-2">手机号</label>
            <input type="text" id="phoneNum" name="phoneNum" class="form-control" required>
            <span class="error" id="phoneNumError"></span>
        </div>

        <div class="form-group form-inline">
            <label for="email" class="mr-2">邮箱</label>
            <input type="email" id="email" name="email" class="form-control" required>
            <span class="error" id="emailError"></span>
        </div>

        <button type="submit" class="btn btn-primary btn-block">注册</button>
    </form>
    <div id="registrationMessage" class="mt-3 text-center"></div>
</div>

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<!-- 引入Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- 引入自定义JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="/js/auth.js"></script>
<script>
    function validateForm() {
        let isValid = true;

        // 登录名称验证
        const loginName = document.getElementById('loginName').value;
        if (loginName.length < 3 || loginName.length > 20) {
            document.getElementById('loginNameError').textContent = '用户名长度必须在3-20之间';
            isValid = false;
        } else {
            document.getElementById('loginNameError').textContent = '';
        }

        // 用户昵称验证
        const nickName = document.getElementById('nickName').value;
        if (nickName.length < 1 || nickName.length > 20) {
            document.getElementById('nickNameError').textContent = '用户昵称长度必须在1-20之间';
            isValid = false;
        } else {
            document.getElementById('nickNameError').textContent = '';
        }

        // 密码验证
        const passwd = document.getElementById('passwd').value;
        const passwdPattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
        if (!passwdPattern.test(passwd)) {
            document.getElementById('passwdError').textContent = '密码必须含有数字和字母，且长度大于6位';
            isValid = false;
        } else {
            document.getElementById('passwdError').textContent = '';
        }

        // 姓名验证
        const name = document.getElementById('name').value;
        if (name.length < 1 || name.length > 20) {
            document.getElementById('nameError').textContent = '姓名长度必须在1-20之间';
            isValid = false;
        } else {
            document.getElementById('nameError').textContent = '';
        }

        // 手机号验证
        const phoneNum = document.getElementById('phoneNum').value;
        const phoneNumPattern = /^1[3-9]\d{9}$/;
        if (!phoneNumPattern.test(phoneNum)) {
            document.getElementById('phoneNumError').textContent = '手机号格式不正确';
            isValid = false;
        } else {
            document.getElementById('phoneNumError').textContent = '';
        }

        // 邮箱验证
        const email = document.getElementById('email').value;
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailPattern.test(email)) {
            document.getElementById('emailError').textContent = '邮箱格式不正确';
            isValid = false;
        } else {
            document.getElementById('emailError').textContent = '';
        }

        return isValid;
    }

    $(document).ready(function () {
        $('#registrationForm').on('submit', function (event) {
            event.preventDefault(); // 阻止表单默认提交行为

            if (validateForm()) {
                const formData = {
                    loginName: $('#loginName').val(),
                    nickName: $('#nickName').val(),
                    passwd: $('#passwd').val(),
                    name: $('#name').val(),
                    phoneNum: $('#phoneNum').val(),
                    email: $('#email').val()
                };

                $.ajax({
                    url: '/api/user/passport/register', // 替换为你的后端注册接口地址
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function (response) {
                        //$('#registrationMessage').html('<div class="alert alert-success">注册成功！</div>')
                        console.log("Ajax Success")
                        console.log(response)
                        console.log(response.data)
                        if (response.code === 200) {
                            console.log("进来了")
                            //  把token存在cookie中、也可以放在localStorage中
                            //	result.ok(map);
                            //	response 相当于Result
                            //	response.data 相当于 Result.ok();
                            //	response.data.data  data看做一个map 相当于 Result.ok(data);
                            //	response.data.map.token 相当于 result.ok(map)
                            //	map 中有token 同时还有 nickName
                            auth.setToken(response.data.token)
                            //	response.data.data 相当于返回来的map
                            //	JSON.stringify(response.data.data) 将map 数据变为json对象，存储到cookie 中
                            auth.setUserInfo(JSON.stringify(response.data))
                            console.log(response.data)
                            //	跳转到首页
                            // 添加短暂的延迟
                            setTimeout(function() {
                                //window.location.href="http://www.gmall.com/index.html"
                                // 跳转到首页
                                window.location.href = "http://gmall.com/";
                            }, 1000); // 1秒后跳转到首页
                            //return;
                        }

                    },
                    error: function (xhr, status, error) {
                        $('#registrationMessage').html('<div class="alert alert-danger">注册失败，请检查输入信息并重试。</div>');
                    }
                });
            }
        });
    });
</script>

</body>
</html>
